import React from 'react';
import {SortItem} from "@/components/k-view/drag-columns/type";
import {Animated, Easing, Platform} from "react-native";
import {CloseIcon, HStack, Icon, Image, Pressable, Text} from "@gluestack-ui/themed";

const DragRow = <T, >(props: SortItem) => {
    const {
        active,
        data,
        labelMaps,
        onRemove
    } = props;
    const activeAnim = React.useRef(new Animated.Value(0));
    const style = React.useMemo(
        () => ({
            ...Platform.select({
                ios: {
                    transform: [
                        {
                            scale: activeAnim.current.interpolate({
                                inputRange: [0, 1],
                                outputRange: [1, 1.07],
                            }),
                        },
                    ],
                    shadowRadius: activeAnim.current.interpolate({
                        inputRange: [0, 1],
                        outputRange: [2, 10],
                    }),
                },

                android: {
                    transform: [
                        {
                            scale: activeAnim.current.interpolate({
                                inputRange: [0, 1],
                                outputRange: [1, 1.07],
                            }),
                        },
                    ],
                    elevation: activeAnim.current.interpolate({
                        inputRange: [0, 1],
                        outputRange: [2, 6],
                    }),
                },
            }),
        }),
        [],
    );
    React.useEffect(() => {
        Animated.timing(activeAnim.current, {
            duration: 300,
            easing: Easing.bounce,
            toValue: Number(active),
            useNativeDriver: true,
        }).start();
    }, [active]);

    function handleRemoveSelect(key: string | number) {
        onRemove && onRemove(key);
    }

    return (
        <Animated.View style={[style]}>
            <HStack
                flex={1}
                alignItems="center"
                space={"xs"}
                bg={"#fff"}
                h={40}
            >
                <Image
                    w={18}
                    h={18}
                    source={require('@/theme/assets/images/icon/custom_col_menu.png')}
                    alt={"DragItem"}
                ></Image>
                <Text
                    color={"$textLight600"}
                    mx={8}
                    size={"sm"}
                    flex={1}
                >{labelMaps ? labelMaps[data] : data}</Text>
                {/**/}
                <Pressable onPress={() => handleRemoveSelect(data)}>
                    <Icon as={CloseIcon} w="$4" h="$4" color={"$textLight600"}/>
                </Pressable>
            </HStack>
        </Animated.View>
    )
};

export default DragRow;